<template>
    <div id="layout">
        <div class="page-container">
            <el-container class="my-box">
                <div class="el-header-wrapper">
                    <el-affix :offset="0">
                        <el-header>
                            <FrontHeaderMenu></FrontHeaderMenu>
                        </el-header>
                    </el-affix>
                    <el-container class="my-container">
                        <el-aside>
                            <MyAsideMenu></MyAsideMenu>
                        </el-aside>
                        <el-main>
                            <RouterView></RouterView>
                        </el-main>
                    </el-container>
                </div>
            </el-container>
        </div>
    </div>
</template>

<script setup>
import FrontHeaderMenu from '../home/FrontHeaderMenu.vue'
import MyAsideMenu from '../home/MyAsideMenu.vue'
</script>

<style scoped>
#layout {
    width: 100%;
    height: 100%;

    .page-container {
        width: 100%;
        height: 100%;

        .el-header-wrapper {
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;

            .el-header {
                height: 10%;
                width: 100%;
                background-color: #87CEFA;
                /* padding: 0px 0px; */
            }

            .my-container {
                width: 100%;
                /* height: 50%; */
                display: flex;
            }

            .el-aside {
                width: 15%;
                /* height: 700px; */
                margin-left: 12%;
                /* background-color: #87CEFA; */
            }

            .el-main {
                padding: 15px;
                flex: 1;
                margin-right: 9%;
                /* 防止内容溢出卡片 */
                overflow: hidden !important;
            }

        }

    }
}
</style>